<template>
  <div class="bot-right">
    <img src="@/assets/images/减去.png" v-if="food.count" @click="updateFoodCount(false)" />
    <input type="number" :value="food.count" v-if="food.count" />
    <img src="@/assets/images/加.png" @click="updateFoodCount(true)" />
  </div>
</template>

<script>
export default {
  props: {
    food: Object
  },

  methods: {
    updateFoodCount(isAdd) {
      this.$store.dispatch('updateFoodCount', { isAdd, food: this.food })
    }
  }

}
</script>

<style lang="scss">
.bot-right {
  img {
    width: 18px;
    position: relative;
    top: 5px;
  }
  input {
    width: 45px;
    outline: none;
    font-size: 12px;
    height: 18px;
    margin-bottom: 0;
    padding: 7px 2px;
    border-radius: 5px;
    text-align: center;
  }
}
</style>